<template>
  <div class="container" ref="containerRef">
    <div ref="chartRef" v-size-ob:content-box="handleSizeChange" class="chart"></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import vSizeOb from "./sizeDirect";
const chartOptins = reactive({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
});
let chart = ref(null);
const chartRef = ref(null);
const containerRef = ref(null);
let width = ref("600px");
let height = ref("500px");
onMounted(() => {
  initChart();
});
const initChart = () => {
  chart = echarts.init(chartRef.value);
  chart.setOption(chartOptins);
};
function handleSizeChange(size) {
  width.value = size.width + "px";
  height.value = size.height + "px";
  chart.resize()
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
  .chart {
    width: v-bind("width");
    height: v-bind("height");
    resize: both;
    overflow: hidden;
  }
}
</style>
